<template>
  <Layout class-prefix="layout">
    <NumberPad :value.sync="record.amount" @submit="saveRecord" />
    <div class="createdAt">
      <FormItem
        field-name="日期"
        type="date"
        placeholder="在这里输入日期"
        :value.sync="record.createdAt"
      />
    </div>
    <div class="notes">
      <FormItem
        field-name="备注"
        placeholder="在这里输入备注"
        :value.sync="record.notes"
      />
    </div>
    <Tags :value.sync="record.tags" />
    <Types :value.sync="record.type" />
  </Layout>
</template>

<script lang="ts">
import Vue from 'vue'
import NumberPad from '@/components/Money/NumberPad.vue'
import Types from '@/components/Money/Types.vue'
import FormItem from '@/components/FormItem.vue'
import Tags from '@/components/Money/Tags.vue'
import { Component } from 'vue-property-decorator'

@Component({
  components: { Tags, FormItem, Types, NumberPad }
})
export default class Money extends Vue {
  get recordList() {
    return this.$store.state.recordList
  }

  record: RecordItem = {
    tags: [],
    notes: '',
    type: '-',
    amount: 0,
    createdAt: new Date().toISOString()
  }

  created() {
    this.$store.commit('fetchRecords')
  }

  onUpdateNotes(value: string) {
    this.record.notes = value
  }

  saveRecord() {
    this.$store.commit('createRecord', this.record)
    if (this.$store.state.createRecordError === null) {
      window.alert('已保存')
    }
    this.record.notes = ''
  }
}
</script>

<style lang="scss" scoped>
::v-deep .layout-content {
  display: flex;
  flex-direction: column-reverse;
}
.notes {
  padding: 12px 0;
}
</style>

